//如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开

/*
<!-- HTML结构 -->
<div  class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>

     <ul class="lang1">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>
*/

//===============================层级选择器
//查找层级，先查找父级，无论你用什么方式查找到的,然后空格开始查找下一层(那是不是意味着可以空格多次实现多层查找)
//优点：正因为首先定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素
var JavaScript=$("#div-1 li.lang-javascript");
console.log(JavaScript);//查找 JavaScript

var all=$("div.testing li");//查找 所有all
console.log(all);

var duoceng = $("div.testing li.lang-javascript");
console.log(duoceng);//会找到两个 class="lang-javascript" 的标签，所以下一步要一层一层找，实现准确的多层查找

var duoceng2 = $("div.testing ul.lang1 li.lang-javascript");
console.log(duoceng2);





//===============================子选择器